<template>
  <div id="report" ref="charts" class="reports" />
</template>

<script>
// Echarts
import * as echarts from 'echarts'
import { getReports } from '@/api/reports'

export default {
  data() {
    return {
      option: {
        title: {
          text: '用户数据'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }
      }
    }
  },

  created() {

  },

  mounted() {
    this.init()
  },

  methods: {
    async init() {
      const res = await getReports()
      const myChart = echarts.init(document.getElementById('report'))
      // 指定图表的配置项和数据
      this.option = { ...this.option, ...res }
      this.option.xAxis = {
        boundaryGap: false,
        data: res.xAxis[0].data
      }
      this.option.yAxis = {
        type: res.yAxis[0].type,
        axisLine: {
          show: true
        }
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option)
    }
  }

}
</script>

<style scoped>
.reports {
  height: 510px;
  background-color: #fff;
}
</style>
